<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #h5tag {
        /* display: none; */
        background-color: #ccc;
        padding: 10px;
    }

    #css3 {
        background-color: rgba(255, 255, 255, 0.5);
        background-image: url(./imgs/img1.jpg);
        background-repeat: no-repeat;
        /* 默认repeat平铺 */
        background-position: center;
        /* 默认位置left top */
        background-size: cover;
        /* cover 图片完全覆盖背景，保证图片不压缩 */
        background-size: contain;
        /* contain 图片完全包含在背景，图片会压缩 */
        /* opacity: 0.5; */
        padding: 10px;
        /* text-align: end; */
        text-indent: 2em;
        color: skyblue;
    }


    table,
    th,
    td {
        border: 2px solid deepskyblue;
    }

    table {
        border-collapse: collapse;
        /* 合并边框 */
        width: 600px;
        height: 300px;
    }

    th {
        background-color: pink;
    }

    td {
        padding: 10px;
        text-align: center;
        vertical-align: center;
        /* 垂直居中 */
    }

    .flexbox {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: pink;

        flex-direction: column;
        /* 主轴方向 */
        justify-content: space-around;
        /* 主轴对齐方式 */
        align-items: center;
        /* 交叉轴对齐方式 */
        align-content: space-between;
        /* 交叉轴对齐方式 */
    }

    .flexitems {
        width: 100px;
        height: 100px;
        /* margin: 10px; */
        text-align: center;
        line-height: 100px;
        font-weight: 600;
        font-size: 20px;
    }

    #item1 {
        background-color: antiquewhite;
        flex: 3;
        order: 1;
    }

    #item2 {
        background-color: gold;
        flex: 1;

    }

    #item3 {
        background-color: skyblue;

        flex: 1;
    }


    .skyblue-box {
        background-color: skyblue;
        width: 300px;
        height: 300px;
    }

    .yellow-box {
        display: inline-block;
        /* 内联块 */
        background-color: yellow;
        width: 100px;
        height: 100px;

        /* float: left; */
    }

    .positionbox {
        height: 200px;
        width: 200px;
        background-color: lightgreen;
        text-align: center;
        line-height: 200px;
        font-size: 20px;
        margin: 0 auto;
        
        /* position: relative; */
        /* 相对原位 */
        /* position: absolute; */
        /* 相对于父元素 */
        /* position: fixed; */
        /* 相对于浏览器 */
        position: sticky;
        /* 相对于屏幕 */
        top: 50px;
        /* right: 50px; */
        /* bottom: 50px; */
        left: 50px;
        
        /* css3新属性 */
        border-radius: 50%;
        box-shadow:  0 100px 10px rgba(2, 48, 17, 0.5);
        /* box-shadow:  inset 0 0 100px rgba(0, 0, 0, 0.5); */

    }

    .myAnimation{
        background-color: skyblue;
        width: 100px;
        height: 100px;
        position: relative;
        /* animation: loong 3s linear 0s infinite; */
        animation: name duration timing-function delay iteration-count direction fill-mode;
        animation-name: loong;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes loong{
        0% {
            /* transform: translateX(0); */
            left: 0;
        }
        /* 50% {
            transform: translateX(400px);
        } */
        100% {
            /* transform: translateX(0); */
            left: 400px;
        }
    }

    @media screen and (max-width: 600px) {
        body{
            background-color: bisque;
        }
    }
    @media screen and (min-width: 600px) and (max-width: 1000px) {
        body{
            background-color: lightblue;
        }
    }
    @media screen and (min-width: 1000px) {
        body{
            background-color: beige;
        }
    }
</style>

<body>
    <div id="css3">
        <p>全局选择器*</p>
        <p>标签选择器|元素选择器</p>
        <p>类选择器.类名</p>
        <p>ID选择器#id名</p>
        <p>属性选择器[属性名=属性值]</p>
        <h3>权重：内联样式 > 内部样式 > 外部样式 > 继承样式 > 全局样式</h3>
        <h3>内联样式1000 > ID选择器100 > 类选择器10 > 标签选择器1 > 全局选择器*</h3>
        <i>关系选择器</i>
        <p>后代选择器元素1 元素2</p>
        <p>子选择器元素1 <b>></b> 元素2</p>
        <p>相邻兄弟选择器元素1 <b>+</b> 元素2</p>
        <p>伪类选择器:first-child</p>
    </div>

    <div class="flexbox">
        <div class="flexitems" id="item1">111</div>
        <div class="flexitems" id="item2">222</div>
        <div class="flexitems" id="item3">333</div>
    </div>

    <div>
        <div class="skyblue-box">
        </div>
        <span>脱离 文档流</span>
        <div class="yellow-box"></div>
    </div>

    <div class="positionbox">position</div>
    <div class="myAnimation">

    </div>

    <div id="h5tag">
        <div>div容器元素，用于布局</div>
        <div>div是一个块级元素，可以设置宽高，默认宽度100%，默认高度auto</div>
        <header>H5新标签 header头部元素，用于页眉</header>
        <nav>H5新标签 nav导航元素，用于导航</nav>
        <article>H5新标签 article文章元素，用于内容
            <section>H5新标签 section章节元素，用于分割内容</section>
        </article>
        <aside>H5新标签 aside侧边栏元素，用于侧边栏</aside>
        <footer>H5新标签 footer页脚元素，用于页脚</footer>
        <em>em孙燕姿 着重文字</em>
        <b>b孙燕姿 粗体文字</b>
        <p>p孙燕姿 段落</p>
        <i>i孙燕姿 斜体字</i>
        <strong>strong孙燕姿 加重语气</strong>
        <del>del 定义删除字</del>
        <span>span 特殊含义</span>
        <br>
        <!-- <img src="./imgs/img1.jpg" alt="alternative"> -->
        <a href="">hypertext reference超文本引用</a>
        <ol type="A">
            <li>
                <ul type="disc">
                    <li>我怀念的</li>
                    <li>遇见</li>
                    <li>开始懂了</li>
                    <li>天黑黑</li>
                </ul>
            </li>
            <li>
                <ul type="circle">
                    <li>我怀念的</li>
                    <li>遇见</li>
                    <li>开始懂了</li>
                    <li>天黑黑</li>
                </ul>
            </li>
            <li>
                <ul type="square">
                    <li>我怀念的</li>
                    <li>遇见</li>
                    <li>开始懂了</li>
                    <li>天黑黑</li>
                </ul>
            </li>
            <li>
                <ul type="none">
                    <li>我怀念的</li>
                    <li>遇见</li>
                    <li>开始懂了</li>
                    <li>天黑黑</li>
                </ul>
            </li>
        </ol>
        <p>合并标签 水平合并colspan 垂直合并rowspan</p>
        <table class="table">
            <tr>
                <th colspan="2">th1 th2</th>
                <th>th3</th>
                <th>th4</th>
            </tr>
            <tr>
                <td rowspan="3">td5</td>
                <td>td6</td>
                <td colspan="2" rowspan="2">td7</td>
                <!-- <td>td8</td> -->
            </tr>
            <tr>

                <td>td10</td>
                <!-- <td>td11</td> -->
                <!-- <td>td12</td> -->
            </tr>
            <tr>
                <!-- <td>td13</td> -->
                <td colspan="3">td14</td>
                <!-- <td>td15</td>
            <td>td16</td> -->
            </tr>
        </table>
        <p>form</p>
        <form action="url" method="get|post" name="myform">form action="url" method="get|post" name="myform">action服务器地址
            name表单名称/form></form>
        <ul>
            <li>get把提交的数据url可以看到，post看不到</li>
            <li>get一般用于提交少量数据，post用来提交大量数据</li>
        </ul>
        <h4>常见块级元素</h4>
        <p>div form h1~h6 hr p table ul... 块级元素 用于布局，可以嵌套其他块级元素</p>
        <h4>常见行内元素</h4>
        <p>a b i em strong span... 行内元素 用于控制文本的样式，不能嵌套其他元素</p>
        <h4>常见行内块元素</h4>
        <p>img input select button... 行内块元素 用于控制元素的大小，可以嵌套其他元素</p>

    </div>
</body>

</html>